<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
    <script src="/index.js"></script>
    <script src="/keyboard.js"></script>
    <script src="/showCurrentTime.js"></script>
    <script src="/sub-window-click.js"></script>
    <script src="/my_musiclist.js"></script>
    <script src="/cookie.js"></script>
    <script src="/all.js"></script>
    <script src="/play_left_right.js"></script>
    <link href="/index.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>html_player</title>
    <style>

    </style>
</head>

<body>

    <!----------弹窗容器---------->
    <div id="fav-toast" style="display:none;position:fixed;top:30%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0);color:#fff;padding:2vh 4vw;border-radius:1vw;opacity:0;transition:opacity 0.5s;z-index: 999999;"></div>
    
    <div class="bg"><img id="bg" src="/source/ba_bg.jpg"
            style="position: absolute; z-index:-9999;height: 100%; width: 100%;filter:grayscale(0.4) brightness(0.6) blur(80px);">
    </div>
    <div class="wrapper">
        <div class="sidenav" id="sidenav"> <!--侧边栏-->
            <button onclick="search()">首页</button>
            <a href="/.html">探索</a>
            <a id="open-setting-btn" onclick="open_sub_window()">设置</a>
            <a id="my_musiclist" onclick="my_musiclist()">我的歌单</a>
            <a href="/.html">关于我</a>

        </div>

        <div class="bottom"> <!--底部播放条-->
            <div class="left"> <!--左边的部分-->
                <img id="img" src="">
                <p class="cur_song" id="cur_song">当前播放的音乐</p> <!--当前音乐名-->
                <div class="buttons">
                    <button onclick="leftAudio()" style="background-image: url(/source/left.png);"></button>
                    <button id="play_buttom" onclick="playAudio()"
                        style="background-image: url(/source/stop.png);"></button>
                    <button onclick="rightAudio()" style="background-image: url(/source/right.png);"></button>
                </div>


            </div>

            <div id="progress-container" class="progress-container"> <!--进度条部分-->
                <div id="progress-bar" class="progress-bar">
                    <div class="ball" id="ball"
                        style="position: absolute; top: -0.13vw; width: 0.5vw;height: 0.5vw;background-color: rgb(255, 255, 255); border: solid 0.1vw white; border-radius: 0.5vw; z-index:9999;">
                    </div>
                </div>
                <p id="audio_time" class="audio-time"
                    style="position:absolute; left:36vw; bottom:0.7vh; color:#ec0000;  font-size: 1vw; z-index:9999;">/
                </p>


            </div>
        </div>

        <div class="up_but">
            <input class="lineedit" id="lineedit" type="text" name="search" placeholder="请输入搜索音乐" maxlength="50">
            <button class="search_but" onclick="search()" id="search_button">搜索</button>
        </div>

        <audio id="myAudio" loop>
            <source src="" type="audio/mp3">
        </audio>

        <table class="music_list" id="music_list" style="font-size: 1.5vh;"> <!--每个音乐的名字不一样，到时候播放找hash啥的用innerHTNL算了-->
            <thead>
                <tr>
                    <th>#</th>
                    <th>歌曲</th>
                    <th>歌手</th>
                    <th>专辑</th>
                    <th>喜欢</th>
                </tr>
            </thead>
        </table>

        <div class="lyric">
            <img id="shoubi" src="./source/shoubi.png" class="shoubi">
            <img id="lyric_img" src="./source/default_song_img.png" class="lyric_img">
            <img id="biankuang" src="./source/biankuang.png" style="width: 29vh; height: 29vh; top:-24.5vh"
                class="lyric_img">
            <div class="container" id="container">
                <ul id="ul">
                </ul>
            </div>
        </div>

        <div class="popup">
            <div class="title">
                <h2>设置中心</h2>
                <button onclick="close_sub_window()" style="background-color: transparent; border: none; padding-right: 1vw; font-size: 3vh;" class="close-btn">x</button>
            </div>
            <ul class="settings">
                <li>
                    <span>背景模糊 01</span>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider round"></span>
                    </label>
                <li>
                <li>
                    <span>背景模糊 0-1</span>
                    <input class="lineedit" id="blur_lineedit" type="text" name="search" placeholder="请输入比例"
                        maxlength="5">
                </li>
                <li>
                    <span>字体颜色</span>
                    <input type="color" id="color_select">
                    <button onclick="color_but()" id="color_but">神秘按钮</button>
                </li>

                <li>
                    <a href="https://gitee.com/Xu-zhiyuan0721/front-end--musicplayer">关于我</a>
                </li>
            </ul>
            
        </div>

        


        <script>
            showCurrentTime();       //也集成歌词滚动
            search();
        </script>
</body>

</html>